<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item v-bind="formItemLayout" label="id">
      <a-input :disabled="true" v-decorator="['id']"/>
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="索引值">
      <a-input
          :disabled="!!id"
          v-decorator="[
          'dictKey',
          {
            rules: [
              {
                required: true,
                message: '请输入字典类型key，必须是唯一的!'
              }
            ]
          }
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="标签名">
      <a-input
          v-decorator="[
          'dictLabel',
          {
            rules: [
              {
                required: true,
                message: '请输入字典类型名称!'
              }
            ]
          }
        ]"
      />
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="描述信息">
      <a-input
          v-decorator="[
          'description',
          {
            rules: [
              {
                required: true,
                message: '请输入描述信息!'
              }
            ]
          }
        ]"
      />
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="备注">
      <a-input v-decorator="['remarks']"
      />
    </a-form-item>

    <a-form-item
        :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 }
      }"
    >
      <a-button type="primary" html-type="submit" v-if="!id">
        保存
      </a-button>
      <a-button type="primary" html-type="submit" v-if="!!id">
        更新
      </a-button>
      <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
        清空
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: "dictCatalogEdit",
    data() {
      return {
        form: this.$form.createForm(this),
        formItemLayout: {
          labelCol: {
            xs: {span: 24},
            sm: {span: 8}
          },
          wrapperCol: {
            xs: {span: 24},
            sm: {span: 16}
          }
        }
      };
    },
    props: {
      id: String
    },

    mounted() {
      if (this.id != null && this.id !== "") {
        this.$services.system.dictCatalog
          .getById({
            data: {
              id: this.id
            }
          })
          .then(res => {
            console.log(res.data);
            this.form.setFieldsValue(res);
            // this.form.mapPropsToFields(res.data);
          });
      }
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();

        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log("Received values of form: ", values);

            if (!values.id) {
              this.$services.system.dictCatalog.add({data: values}).then(res => {
                if (res) {
                  this.$message.success('添加成功');
                } else {
                  this.$message.success('添加失败');
                }

              });
            } else {
              this.$services.system.dictCatalog.update({data: values}).then(res => {
                if (res) {
                  this.$message.success('更新成功');
                  this.$emit("handlerSuccess");
                } else {
                  this.$message.success('更新失败');
                }
              });
            }
          }
        });
      },

      handleReset() {
        this.form.resetFields(['dictLabel', 'description', 'remarks']);
      }
    }
  };
</script>

<style scoped></style>
